<template>
	<div class="login">
		<div>
			<el-container style="height: 380px; border: 1px solid #9be5ff;width: 400px;border-radius: 30px; background-color:whitesmoke">
				<el-main>
					<h1 style="text-align: center;">登录验证</h1>
					<el-form :inline="false" class="demo-form-inline">
						<el-form-item label="账号">
							<i class="el-icon-user"></i>
							<el-input placeholder="请输入账号" v-model="user_msg"></el-input>
						</el-form-item>

						<el-form-item label="密码">
							<i class="el-icon-warning-outline"></i>
							<el-input placeholder="请输入密码" v-model="user_pwd" show-password></el-input>
						</el-form-item>
						<div align="right">
							<el-link type="primary" href="/register">注册新用户</el-link>
							<el-link type="primary" style="margin-left: 10px;" @click="scanFaceClick">扫脸登录</el-link>
						</div>
						<el-form-item>
							<div align="center">
								<el-button type="primary" @click="loginBtnClick" plain style="align: center;">登录</el-button>
							</div>
						</el-form-item>

					</el-form>
				</el-main>
			</el-container>
		</div>
		<div>
			<el-dialog class="dialog" title="扫脸登录" :visible.sync="dialogVisible" center width="500px" :before-close="handleClose">
				<div>
					<video ref="video" style="margin: 0;" width="450" height="400" autoplay></video>
					</di>
					<canvas style="display: none;" id="canvas" ref="canvas" width="450" height="400"></canvas>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="takePhoto">登 录</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import LoginService from './LoginService.js';
	export default {
		name: "Login",
		data() {
			return {
				user_msg: '',
				user_pwd: '',
				imgSrc: require('../../assets/timg.jpg'),
				dialogVisible: false,
			}
		},
		created() {

		},
		methods: {
			loginBtnClick() {
				Vue.axios.get(`http://localhost:8080/user/login`, {
					params: {
						user_msg: this.user_msg,
						user_pwd: this.user_pwd
					}
				}).then(
					r => {
						if (r.data.isLogin) {
							this.$store.commit('changeLogin', true);
							this.$router.push({
								name: 'Home'
							});
						} else {
							alert("账号或密码错误");
						}
					}
				)
			},
			scanFaceClick() {
				this.dialogVisible = true;
				this.getVideo();
			},
			handleClose(done) {
				done();
				let video = this.$refs.video;
				video.srcObject.getTracks()[0].stop();
				// this.$refs['video'].srcObject = null;
			},
			getVideo() {
				this.$nextTick(() => {

					var video = this.$refs.video; //这个对应的是ref属性

					navigator.mediaDevices.getUserMedia({
							"video": true
						})
						.then(function(stream) {
							try {
								video.src = window.URL.createObjectURL(stream);
							} catch (e) {
								video.srcObject = stream;
							}

							video.onloadmetadate = function(e) {
								video.play();

							}
						});
				})

			},
			takePhoto() {
				this.$nextTick(() => {
					this.context = this.$refs.canvas.getContext("2d");
					this.context.drawImage(this.$refs.video, 0, 0, 330, 250);

					let photo = document.getElementById("canvas").toDataURL(
						"image/png");
					let pfile = this.dataURLtoFile(photo, 'photo')
					console.log(pfile);
					let formData = new FormData();
					formData.append('file', pfile);

					LoginService.faceLoginUrlService(formData, res => {
						console.log(res);
						if (res.isLogin) {
							let video = this.$refs.video;
							video.srcObject.getTracks()[0].stop();
							// this.$refs['video'].srcObject = null;
							this.$store.commit('changeLogin', true);
							this.$router.push({
								name: 'Home'
							});
						} else {
							alert("账号或密码错误");
						}
					})
				})
			},
			getBase64() {
				var imgSrc = document.getElementById("canvas").toDataURL(
					"image/png");

				return imgSrc.split("base64,")[1];

			},
			dataURLtoFile(dataurl, filename) {
				var arr = dataurl.split(',')
				var mime = arr[0].match(/:(.*?);/)[1]
				var bstr = atob(arr[1])
				var n = bstr.length
				var u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new File([u8arr], filename, {
					type: mime
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../main.less";

	.login {
		height: calc(100vh);
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../../assets/timg.jpg);

		.el-container {
			width: 300px;
			height: 200px;
			//border:1px solid lightblue;
		}
	}

	.dialog {
		background-color: #404040;
	}
</style>
